<script>
import HumanSoundDialog from "@/views/aihuman/humanManagement/addHuman/humanSoundDialog.vue";

export default {
  name: "humanTimbre",
  components: {HumanSoundDialog},
  data() {
    return {
      sound: []
    }
  },
  methods: {
    nextStep() {
      this.$emit('on-next', 4)
    },
    prevStep() {
      this.$emit('on-prev', 2)
    },
    openDialog() {
      this.$refs.sondDialog.openDialog(this.sound)
    },
    getSound(val) {
      this.sound = val
    }
  }
}
</script>

<template>
  <div>
    <div class="content">
      <div style="flex: 1;">
        <h3>配置音色</h3>

        <el-row :gutter="50">
          <el-col :span="12">
            <div class="selection-box">
              <header>
                <div>
                  设置默认音色
                </div>
                <el-button type="text" @click="openDialog">资源库选择></el-button>
              </header>

              <div class="selection-box__body">
                <el-tag v-for="item in sound" :key="item.value" size="small">
                  {{ item.soundTypeName }}
                </el-tag>
              </div>
            </div>

          </el-col>
        </el-row>

      </div>
    </div>

    <human-sound-dialog
      ref="sondDialog"
      @get-select="getSound"
    />
  </div>
</template>

<style scoped lang="scss">
.selection-box {
  width: 100%;

  header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  &__body {
    background: #F8F8F8;
    border-radius: 5px;
    padding: 15px;
    height: 100px;
    box-sizing: border-box;

    &--small {
      height: 80px;
    }
  }
}

.content {
  display: flex;
}
</style>
